<div class="row">
  <x-button>default</x-button>
  <x-button type="primary">primary</x-button>
  <x-button type="success">success</x-button>
  <x-button type="warning">warning</x-button>
  <x-button type="danger">danger</x-button>
  <x-button type="info">info</x-button>
</div>
<div class="row">
  <x-button plain>plain</x-button>
  <x-button type="primary" plain>primary</x-button>
  <x-button type="success" plain>success</x-button>
  <x-button type="warning" plain>warning</x-button>
  <x-button type="danger" plain>danger</x-button>
  <x-button type="info" plain>info</x-button>
</div>
<div class="row">
  <x-button round>round</x-button>
  <x-button type="primary" round>primary</x-button>
  <x-button type="success" round>success</x-button>
  <x-button type="warning" round>warning</x-button>
  <x-button type="danger" round>danger</x-button>
  <x-button type="info" round>info</x-button>
</div>
<div class="row">
  <x-button icon="fto-search" circle></x-button>
  <x-button icon="fto-edit-3" type="primary" circle></x-button>
  <x-button icon="fto-check" type="success" circle></x-button>
  <x-button icon="fto-star" type="warning" circle></x-button>
  <x-button icon="fto-trash-2" type="danger" circle></x-button>
  <x-button icon="fto-trash" type="info" circle></x-button>
</div>